<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>团购页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />		
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/tuangou.css"/>
		<link rel="stylesheet" href="css/swiper-4.2.2.min.css" />
		
	</head>
	<body>
		<div id="web">
			<!--头部-->
			<header class="clearfix">
				<!--logo-->
				<div class="head_logo fl">
					<a href="#">
						<img src="img/logo.png"/>
					</a>
				</div>
					
				<!--下拉框-->
				<div class="selectBar fr">
					<select name="">
						<option value="广州">广州</option>
						<option value="深圳">深圳</option>
					</select>
				</div>
				<!--搜索框-->
				<div class="searchBar">
					<input type="text" name="" id="" value="" placeholder="请输入商品名称" />
					<img src="img/fangdajing.png"/>
				</div>
				
			</header>
			
			<!--滚动部分-->
			<div class="session">
					<div class="swiper-container">
					    <div class="swiper-wrapper">
					        <div class="swiper-slide"><img src="img/banner_10.jpg" alt="" /></div>
					        <div class="swiper-slide"><img src="img/banner_10.jpg" alt="" /></div>
					        <div class="swiper-slide"><img src="img/banner_10.jpg" alt="" /></div>
					    </div>
					    <!-- 如果需要分页器 -->
					    <div class="swiper-pagination"></div>
					    
					    <!-- 如果需要导航按钮 -->
					    <div class="swiper-button-prev"></div>
					    <div class="swiper-button-next"></div>
					    
					</div>				
				<div class="discount">
					<div class="discount-top clearfix">
						<span><img src="img/index-1.jpg" alt="" /></span>
						<h3>优惠团购</h3>	
						<div class="more">
							<span><img src="img/index-2.jpg" alt="" /></span><span>更多</span>
						</div>					
					</div>
					<div class="show">
						<div class="show-top clearfix">
							<a href=""><img src="img/index-3.jpg" alt=""  class="fl" /></a>
							<a href=""><img src="img/index-4.jpg" alt=""  class="fr" /></a>
						</div>
						<div class="show-bottom clearfix">
							<img src="img/index-5.jpg" alt=""  class="fl" />
							<img src="img/index-6.jpg" alt=""  class="fr" />
						</div>
					</div>
					
				</div>
				
				<div class="discount like">
					<div class="discount-top clearfix">
						<span><img src="img/index-1.jpg" alt="" /></span>
						<h3>猜你喜欢</h3>	
						<div class="more">
							<span><img src="img/index-2.jpg" alt="" /></span><span>更多</span>
						</div>							
					</div>
					<div class="content clearfix">
						<div class="content-left">
							<img src="img/index-7.jpg" alt="" class="fl" />
						</div>
						<div class="content-middle fl">
							<p class="c-title">万岁寿司（正佳店）</p>
							<p class="c-com">[100店通用] 双人套餐</p>
							<p class="c-price">￥88.00</p>
						</div>
						<div class="content-right fr">
							<p><100m</p>
							<p>已售1000</p>
						</div>
					</div>
					<div class="content clearfix">
						<div class="content-left">
							<img src="img/index-8.jpg" alt="" class="fl" />
						</div>
						<div class="content-middle fl">
							<p class="c-title">周黑鸭（正佳店）</p>
							<p class="c-com">[100店通用] 双人套餐</p>
							<p class="c-price">￥88.00</p>
						</div>
						<div class="content-right fr">
							<p><100m</p>
							<p>已售1000</p>
						</div>
					</div>
				</div>
			</div>
			
			
			<!--底部-->
			<footer>
				<ul>
					<li>
						<a href="index.html">
							<i class="iconfont icon-path active"></i>
							<p>首页</p>
						</a>
					</li>
					<li>
						<a href="classify.html">
							<i class="iconfont icon-classify"></i>
							<p>分类</p>
						</a>
					</li>
					<li>
						<a href="find.html">
							<i class="iconfont icon-zhinanzhen"></i>
							<p>发现</p>
						</a>
					</li>
					<li>
						<a href="mypage.html">
							<i class="iconfont icon-user"></i>
							<p>我的</p>
						</a>
					</li>
				</ul>
			</footer>
			
			
		</div>
		
		
		
		
		<!--自动计算根字体大小的脚本-->
		<script>
		//安卓的输入法虚拟键盘会影响body的高度，所以在加载时，将body的原本高度给固定住
		document.body.style.height = window.innerHeight + "px";
		
        /*动态改变根元素字体大小*/
        function recalc() {
            var clientWidth = document.documentElement.clientWidth;
            if(!clientWidth) return;
            document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
        }

        function initRecalc() {
            recalc();
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if(!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();
    	</script>
    	<script src="js/swiper-4.2.2.min.js"></script>
    	
    	<script>        
			  var mySwiper = new Swiper ('.swiper-container', {
//			    direction: 'vertical',
			    loop: true,
			    
			    // 如果需要分页器
			    pagination: {
			      el: '.swiper-pagination',
			    },
			    
			    // 如果需要前进后退按钮
			    navigation: {
			      nextEl: '.swiper-button-next',
			      prevEl: '.swiper-button-prev',
			    },
			    
			    // 如果需要滚动条
//			    scrollbar: {
//			      el: '.swiper-scrollbar',
//			    },
			  })        
  		</script>
	</body>
</html>
